<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>重置密码 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/api.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <style>
        .box {
            width: 30%;
            margin: 140px auto;
            text-align: center;
        }

        .box img {
            width: 80px;
        }

        .box div {
            margin: 20px;
        }

        .box input {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            box-sizing: border-box;
            border-radius: 6px;
            background: #f1f6f7;
            border: 1px solid #a5bae8;
            outline: medium;
        }

        .box Button {
            width: 100%;
            height: 40px;
            background: #fe7300;
            border: none;
            outline: medium;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            border-radius: 5px;
            font-family: '微软雅黑';
        }

        .box a {
            width: 30%;
            text-align: center;
            border: 1px solid #a5bae8;
            line-height: 40px;
            height: 38px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background: #fe7300;
            color: #fff;
            cursor: pointer;
        }

        .a-not-click {
            background: #d4d4d4 !important;
            color: #929292 !important;
        }
    </style>
</head>
<body>
<div class="main-div forget">
    <div class="main-box">
        <div th:replace="~{commons::headerbar}"></div>
        <div class="box">
            <div>
                <img th:src="@{/images/logo.png}"/>
            </div>
            <div style="font-size: 30px; font-weight: 700">
                重置密码
            </div>
            <div style="color: #8C92A4;">
                请通过输入 TOP英皇教学平台 手机重置你的帐号密码
            </div>
            <div>
                <input id="phone" placeholder="请输入手机号码"/>
            </div>
            <div style="display: flex" class="yzm">
                <input id="code" placeholder="请输入短信验证码"
                       style="width: 70%;border-right: none;border-top-right-radius: 0;border-bottom-right-radius: 0; "/>
                <a onclick="getVerificationCode()">获取验证码</a>
            </div>
            <div>
                <input type="password" id="password" placeholder="请输入密码"/>
            </div>
            <div>
                <input type="password" id="confirm_password" placeholder="请输入确认密码"/>
            </div>
            <div>
                <Button onclick="resetPassword()">重置密码</Button>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
</body>
<script>
    let layer
    $(function () {
        layui.use(['table', 'form', 'element', 'layer'], function () {
            layer = layui.layer, element = layui.element
        })
    })

    // 获取手机验证码
    function getVerificationCode() {
        //1. 获取手机号
        let phone = $.trim($('#phone').val())
        if (phone === null || phone === '') {
            layer.tips('登录手机不能为空', '#phone', {tips: [3, '#202d4a']});
            return false
        }
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!reg.test(phone)) {
            layer.tips('登录手机格式不正确', '#phone', {tips: [3, '#202d4a']});
            return false
        }
        let student = {stuMobile: phone}
        post(api.GetVerification, student).then(res => {
            $('.yzm a').attr("disabled", true); //设置成灰色不可点击
            $('.yzm a').css("pointer-events", "none");  //设置鼠标事件不可用
            $('.yzm a').addClass('a-not-click')
            let time = 30
            $('.yzm a').text(time + '秒后可用')
            let id = setInterval(function () {
                time--
                if (time <= 1) {
                    $('.yzm a').text('获取验证码')
                    $('.yzm a').attr("disabled", false);
                    $('.yzm a').css("pointer-events", "auto");
                    $('.yzm a').removeClass('a-not-click')
                    clearInterval(id)
                    return
                }
                $('.yzm a').text(time + '秒后可用')
            }, 1000)
        })
    }

    // 重置手机
    function resetPassword() {
        //1. 获取手机号
        let phone = $.trim($('#phone').val())
        let code = $.trim($('#code').val())
        let password = $.trim($('#password').val())
        let confirmPass = $.trim($('#confirm_password').val())
        if (phone === null || phone === '') {
            layer.tips('登录手机不能为空', '#phone', {tips: [3, '#202d4a']});
            return false
        }
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!reg.test(phone)) {
            layer.tips('登录手机格式不正确', '#phone', {tips: [3, '#202d4a']});
            return false
        }
        if (code === null || code === '') {
            layer.tips('短信验证码不能为空', '#code', {tips: [3, '#202d4a']});
            return false
        }
        if (password === null || password === '') {
            layer.tips('密码不能为空', '#password', {tips: [3, '#202d4a']});
            return false
        }
        if (confirmPass === null || confirmPass === '') {
            layer.tips('密码不能为空', '#confirm_password', {tips: [3, '#202d4a']});
            return false
        }
        if (password !== confirmPass) {
            layer.tips('两次密码不一致', '#confirm_password', {tips: [3, '#202d4a']});
            return false
        }
        let student = {stuMobile: phone, code: code, password: password}
        post(api.ForgetPassword, student).then(res => {
            if (res.code === '000000') {
                location.href = '/'
            } else {
                layer.msg('重置密码失败，请刷新后重试。', {icon: 5});
            }
        })
    }
</script>
<!--<script src="https://www.yingyuchat.com/static/js/warbler-front.js"></script>
<script>
    WARBLER.init({
        WARBLER_URL: "https://www.yingyuchat.com",
        WARBLER_KEFU_ID: "matao123",
        WARBLER_ENT: "513",
        WARBLERAUTO_SHOW: false
    })
</script>-->
</html>